<template>
  <div id="register-container" class="register-container">
    <div class="logo"></div>
    <div class="register-form">
      <div class="button-box">
        <uni-icons type="person" size="30"></uni-icons>
        <input v-model="user.account" />
      </div>
      <div class="button-box">
        <uni-icons type="locked" size="30"></uni-icons>
        <input v-model="user.password" type="password" />
      </div>
      <button class="register-btn" @click="submit">注册</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { register } from "@/api";

const user = reactive({
  account: "",
  password: "",
});
var height = window.innerHeight;

window.onresize = function () {
  let c: any = document.getElementById("register-container");
  if (c) {
    c.style.height = height + "px";
  }
};
const submit = async () => {
  console.log(user);
  let data: any = await register(user);
  if (data.data) {
    uni.navigateTo({ url: "/pages/login/login" });
  }
};
</script>
<style lang="scss" scoped>
.register-container {
  width: 750rpx;
  height: 100vh;
  background: url("../../static/register-bg.png");
  background-size: 100% 100%;
  position: relative;
}
.logo {
  position: absolute;
  width: 150rpx;
  height: 140rpx;
  left: 300rpx;
  top: 580rpx;
  background: url("../../static/logo.png");
  background-size: 100% 100%;
}
.register-form {
  position: absolute;
  top: 740rpx;
  color: white;
  width: 100%;
  padding: 40rpx;
}
.button-box {
  display: flex;
  margin-top: 20rpx;
  width: 670rpx;
  height: 94rpx;
  line-height: 94rpx;
  padding: 0 20rpx;
  border-radius: 47rpx;
  border: 2px solid rgba(68, 77, 114, 1);
  input {
    margin-left: 15rpx;
    width: 100%;
    height: 100%;
  }
}
.register-btn {
  width: 670rpx;
  height: 96rpx;
  color: rgba(237, 237, 237, 1);
  margin-top: 20rpx;
  border-radius: 48rpx;
  background: rgba(38, 97, 221, 1);
}
.register {
  margin-top: 10rpx;
  width: 100%;
  text-align: center;
}
</style>
